$up_light:10%;
.button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    // box-sizing: border-box;
    outline: none;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 2px;

    &.is-round {
        border-radius: 20px;
        padding: 12px 23px;
    }
    &.is-plain{
      &:focus,&:hover{
        background: #fff;
        border-color: $primary;
        color: $primary;
      }
    }
    &.is-disabled,&.disabled{
      opacity:.6;
      cursor: not-allowed;
    }
    &:hover,&:focus{
      color: #000;
      border-color: #ddd;
      background-color: #f8f8f8;
    }
}
.button-blue{
    color: #fff;
    background-color: $primary_blue;
    border-color: $primary_blue;
    &:focus,&:hover{
      background: darken($primary_blue,$up_light);
      border-color:darken($primary_blue,$up_light);
      color: #fff;
    }
}
.button-primary {
    color: #fff;
    background-color: $primary;
    border-color: $primary;
    &:focus,&:hover{
      background: darken($primary,$up_light);
      border-color:darken($primary,$up_light);
      color: #fff;
    }
}
.button-primary.is-plain {
    color: $primary;
    background:#fff;
    border-color:$primary;
    &:hover,&:focus{
      background: $primary;
      border-color: $primary;
      color: #fff;
    }
}

.button-black {
  color: #fff;
  background-color: $black;
  border-color: $black;
  &:focus,&:hover{
    background: darken($black,10%);
    border-color:darken($black,10%);
    color: #fff;
  }
}
.button-black.is-plain {
  color: $black;
  background:#fff;
  border-color:$black;
  &:hover,&:focus{
    background: $black;
    border-color: $black;
    color: #fff;
  }
}
.button-transparent{
  color: $black;
  background:transparent;
  border-color: $black;
  &.white{
    color: $white;
    border-color: $white;
  }
  &:hover,&:focus{
    background: $primary;
    border-color: $primary;
    color: #fff;
  }
}